<template>
  <commonformdialog :isshowDialogs="isshowDialog" :dialogTitle="dialogTitle" @closetextDialog="closeDialog" @confirmbtn="confirmbtn"
    :dialogWidth='"60%"'>
    <div class="formarea">
      <el-form ref="coachForm" :model="coachForms" :rules="rules" size="medium" label-width="100px">
        <el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="教练姓名" prop="name">
                <el-input v-model="coachForms.name" placeholder="请输入教练姓名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="tel">
                <el-input v-model="coachForms.tel" placeholder="请输入手机号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教龄" prop="driver_age">
                <el-input v-model="coachForms.driver_age" placeholder="请输入教龄" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">

              <el-form-item label="身份证号" prop="id_card">
                <el-input v-model="coachForms.id_card" placeholder="请输入身份证号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>

            </el-col>
            <el-col :span="8">

              <el-form-item label="教学科目" prop="teach_subjects">
                <el-select v-model="coachForms.teach_subjects" placeholder="请选择教学科目" multiple collapse-tags clearable
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in teach_subjectsOptions" :key="index" :label="item.label" :value="item.value"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>


            </el-col>
            <el-col :span="8">

              <el-form-item label="准教车型" prop="teach_models">
                <el-select v-model="coachForms.teach_models" placeholder="请选择准教车型" multiple collapse-tags clearable
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in teach_modelsOptions" :key="index" :label="item.title" :value="item.id"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">

              <el-form-item label="关联车辆" prop="cars_id">
                <el-select v-model="coachForms.cars_id" placeholder="请选择关联车辆" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in cars_idOptions" :key="index" :label="item.title" :value="item.id"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="8">

              <el-form-item label="关联机构" prop="team_id">
                <treeselect :style="{width: '100%'}" v-model="coachForms.team_id" :options="treeOptions"
                  :default-expand-level="1" :normalizer="normalizer" placeholder="请选择关联机构" />
                <!-- <el-select v-model="addcarforms.school_id" placeholder="请选择校区" clearable :style="{width: '92%'}">
                 <el-option v-for="(item, index) in xqOptions" :key="index" :label="item.title"
                   :value="item.id" :disabled="item.disable"></el-option>
               </el-select> -->
              </el-form-item>

            </el-col>
            <el-col :span="8">

              <el-form-item label="科二训练场" prop="train_place_two">
                <el-select v-model="coachForms.train_place_two" placeholder="请选择科二训练场" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in train_place_twoOptions" :key="index" :label="item.title" :value="item.id"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">

              <el-form-item label="培训人数" prop="max_students">
                <el-input v-model="coachForms.max_students" placeholder="最大培训人数" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>

            </el-col>

            <el-col :span="8">

              <el-form-item label="资格证号" prop="certification_num">
                <el-input v-model="coachForms.certification_num" placeholder="请输入资格证号" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="8">

              <el-form-item label="资格等级" prop="certification_type">
                <el-select v-model="coachForms.certification_type" placeholder="请选择资格等级" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in certification_typeOptions" :key="index" :label="item.title" :value="item.id"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">

              <el-form-item label="驾驶证号" prop="driver_num">

                <el-input v-model="coachForms.driver_num" placeholder="请输入驾驶证号" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>

            </el-col>

            <el-col :span="8">

              <el-form-item label="初领日期" prop="driver_time">
                <el-date-picker v-model="coachForms.driver_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}"
                  placeholder="请选择初领日期" clearable></el-date-picker>
              </el-form-item>

            </el-col>
            <el-col :span="8">

              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="coachForms.sex" size="medium">
                  <el-radio v-for="(item, index) in sex_option" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>


            <el-col :span="8">
              <el-form-item label="经营方式" prop="belong_type">
                <el-radio-group v-model="coachForms.belong_type" size="medium">
                  <el-radio v-for="(item, index) in belong_typeOptions" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>
        </el-row>
        <el-row>
          <el-form-item label="教练介绍" prop="description">
            <el-input v-model="coachForms.description" type="textarea" placeholder="请输入教练介绍" rows="4" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-row>
        </el-row>
      </el-form>

    </div>
  </commonformdialog>
</template>

<script>
  import commonformdialog from '@/components/commondialog/commondialog'
  //地图弹窗组件
  import mapDialog from '@/components/selectmap/selectmap'
  //引入图片上传组件
  import uploadimg from '@/components/uploadimg/uploadimg'
  //按钮权限验证
  import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
  import checkPermission from "@/utils/permission";
  //api
  import {
    createCoach,
    readData,
    updateData
  } from '@/api/coach'
  //获取sessionStorage
  import {
    getSessionStorage
  } from '@/utils/accessToken'
  import {
    parse
  } from 'qs'
  export default {
    data() {
      return {
        bmdOptions: [],
        treeOptions: [],
        isdisableenroll: false,
        coachForms: {
          sex: '',
          id_card: '',
          belong_type: '',
          name: '',
          tel: '',
          driver_age: '',
          max_students: '',
          train_place_two: '',
          train_place_three: "",
          cars_id: "",
          teach_subjects: [],
          type: '',
          certification_num: '',
          certification_type: '',
          driver_num: "",
          driver_time: null,
          teach_models: [],
          description: '',
          enroll_point_id: ''
        },
        rules: {
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          id_card: [{
            required: true,
            message: '请输入身份证号码',
            trigger: 'change'
          }],
          belong_type: [{
            required: true,
            message: '请选择经营方式',
            trigger: 'change'
          }],
          team_id: [{
            required: true,
            message: '请选择关联机构',
            trigger: 'change'
          }],
          name: [{
            required: true,
            message: '请输入教练姓名',
            trigger: 'change'
          }],
          tel: [{
            required: true,
            message: '请输入手机号',
            trigger: 'change'
          }, {
            pattern: /^1\d{10}$/,
            message: '手机号有误',
            trigger: 'change'
          }],
          driver_age: [{
            required: true,
            message: '请输入教龄',
            trigger: 'change'
          }],
          max_students: [],
          train_place_two: [],
          train_place_three: [],
          cars_id: [],
          teach_subjects: [{
            required: true,
            type: 'array',
            message: '请至少选择一个教学科目',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }],
          certification_num: [],
          certification_type: [],
          driver_num: [],
          driver_time: [],
          teach_models: [{
            required: true,
            type: 'array',
            message: '请至少选择一个准教车型',
            trigger: 'change'
          }],
          description: '',
        },
        train_place_twoOptions: [],
        cars_idOptions: [],
        belong_typeOptions: [{
          "label": "直营",
          "value": 1
        }, {
          "label": "加盟",
          "value": 2
        }],
        teach_subjectsOptions: [{
            "label": "科目一",
            "value": 1
          }, {
            "label": "科目二",
            "value": 2
          },
          {
            "label": "科目三",
            "value": 3
          },
          {
            "label": "科目四",
            "value": 4
          }
        ],
        certification_typeOptions: [],
        teach_modelsOptions: [],
        sex_option: [{
            "label": "男",
            "value": 1
          },
          {
            "label": "女",
            "value": 2
          }
        ]
      }
    },
    components: {
      commonformdialog,
      mapDialog,
      uploadimg,
      Treeselect
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
        required: true,
      },
      //表单的名字
      dialogTitle: {
        type: String,
        default: '',
        required: true,
      },
      //是编辑还是新增
      formType: {
        type: Number,
        default: 0
      }
    },
    watch: {
      isshowDialog(val) {
        console.log(val)
        if (val) {
          //如果用户权限为normal 禁用 报名点
          if (checkPermission(['normal'])) {
            this.isdisableenroll = true
            this.coachForms.enroll_point_id = JSON.parse(window.sessionStorage.getItem('userinfo')).enrollPoint
            console.log(this.coachForms.enroll_point_id)
          }
        }
      }
    },
    methods: {
      checkPermission,
      normalizer(node) {
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        }
      },
      closeDialog() {
        //重置表单
        this.$refs['coachForm'].resetFields()
        this.$emit('closedialog')
      },
      confirmbtn() {
        this.$refs['coachForm'].validate(async valid => {
          if (!valid) return
          // TODO 提交表单
          let {
            id,
            cars_id,
            belong_type,
            team_id,
            certification_num,
            driver_age,
            certification_type,
            description,
            driver_num,
            driver_time,
            max_students,
            name,
            teach_models,
            teach_subjects,
            tel,
            train_place_three,
            train_place_two,
            sex,
            id_card,
            enroll_point_id
          } = this.coachForms
          let params = {
            id_card,
            sex,
            team_id,
            belong_type,
            cars_id,
            certification_num,
            certification_type,
            description,
            driver_age,
            driver_num,
            driver_time,
            max_students,
            name,
            teach_models: teach_models.join(),
            teach_subjects: teach_subjects.join(),
            tel,
            train_place_three,
            train_place_two,
            enroll_point_id
          }
          if (this.formType == 0) {
            let data = await createCoach(params);
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
               //清空数据
          this.$refs['coachForm'].resetFields()
          this.$emit('confirm')
            }
          } else {
            params.id = id
            // params.train_place_three =train_place_three.value
            // params.train_place_two = train_place_two.value
            let data = await updateData(params)
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }
             //清空数据
          this.$refs['coachForm'].resetFields()
          this.$emit('confirm')
          }
         
        })
      },
      //用户选择地图
      selectmap() {

      },
      //关闭地图弹窗
      closemap() {

      },
      //用户确认选择地图
      affirmMap(params) {

      },
    },
    mounted() {
      this.treeOptions = getSessionStorage('Optionsall').team
      //设置选项数据
      this.teach_modelsOptions = getSessionStorage('Options')[1]
      //关联车辆
      this.cars_idOptions = getSessionStorage('Optionsall')['car']
      //训练场
      this.train_place_twoOptions = getSessionStorage('Optionsall')['train']
      // 资格等级
      this.certification_typeOptions = getSessionStorage('Options')[13]
      //报名点
      this.bmdOptions = getSessionStorage('Optionsall')['team']
      //点击编辑 获取回显数据
      this.$bus.on("editcoach", async (val) => {
        //获取要编辑的id
        let id = val.id
        let data = await readData({
          id: id
        })
        let {
          teach_subjects
        } = data.data
        data.data.teach_subjects = data.data.teach_subjects.value
        data.data.teach_models = data.data.teach_models.value
        this.coachForms = data.data
        this.coachForms.team_id = data.data.team_id.value
        this.coachForms.train_place_two = data.data.train_place_two.value
        this.coachForms.train_place_three = data.data.train_place_three.value
        this.coachForms.cars_id = data.data.cars_id.value
      });
    },
    destroyed() {
      this.$bus.off("editcoach")
    }
  }
</script>

<style scoped lang='scss'>
  .formtips {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 100px;
  }
</style>
